import 'package:cook_dinner/widgets/input.dart';
import 'package:flutter/material.dart';
import 'package:cook_dinner/config/include.dart';

const List<String> selectText = ['简单', '一般', '困难', '非常困难'];

class CookData extends StatefulWidget {
  const CookData({Key? key}) : super(key: key);

  @override
  State<CookData> createState() => _CookDataState();
}

class _CookDataState extends State<CookData> {
  int _current = 0;
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: EdgeInsets.only(top: 19.rpx, left: 28.rpx, right: 28.rpx),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '给你的食谱命名',
            style: TextStyle(
              fontSize: 16.rpx,
              color: const Color(0xff333333),
            ),
          ),
          Container(
            width: 335.rpx,
            height: 48.rpx,
            margin: EdgeInsets.only(top: 24.rpx, bottom: 19.rpx),
            padding: EdgeInsets.symmetric(horizontal: 16.rpx),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8.rpx),
              color: const Color(0xffF7F7F7),
            ),
            alignment: Alignment.center,
            child: textInput(hintText: '比如青豆泡椒肉丁', fontSize: 16.rpx),
          ),
          Text(
            '制作时长',
            style: TextStyle(
              fontSize: 16.rpx,
              color: const Color(0xff333333),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 14.rpx, bottom: 21.rpx),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  width: 47.rpx,
                  height: 24.rpx,
                  margin: EdgeInsets.only(right: 17.rpx),
                  padding: EdgeInsets.symmetric(horizontal: 10.rpx),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(4.rpx),
                    color: const Color(0xffF7F7F7),
                  ),
                  alignment: Alignment.center,
                  child: textInput(
                      hintText: '0',
                      fontSize: 16.rpx,
                      textAlign: TextAlign.center),
                ),
                Text(
                  'h',
                  style: TextStyle(
                    fontSize: 14.rpx,
                    color: const Color(0xff333333),
                  ),
                ),
                Container(
                  width: 47.rpx,
                  height: 24.rpx,
                  margin: EdgeInsets.only(right: 17.rpx, left: 17.rpx),
                  padding: EdgeInsets.symmetric(horizontal: 10.rpx),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(4.rpx),
                    color: const Color(0xffF7F7F7),
                  ),
                  alignment: Alignment.center,
                  child: textInput(
                      hintText: '0',
                      fontSize: 16.rpx,
                      textAlign: TextAlign.center),
                ),
                Text(
                  'min',
                  style: TextStyle(
                    fontSize: 14.rpx,
                    color: const Color(0xff333333),
                  ),
                ),
              ],
            ),
          ),
          Text(
            '添加食谱封面',
            style: TextStyle(
              fontSize: 16.rpx,
              color: const Color(0xff333333),
            ),
          ),
          SizedBox(height: 14.rpx),
          Center(
            child: Image.asset(
              'assets/images/cover.png',
              width: 284.rpx,
              height: 203.rpx,
            ),
          ),
          SizedBox(height: 24.rpx),
          Text(
            '份量类型',
            style: TextStyle(
              fontSize: 16.rpx,
              color: const Color(0xff333333),
            ),
          ),
          Container(
            width: 335.rpx,
            height: 48.rpx,
            margin: EdgeInsets.only(top: 24.rpx, bottom: 19.rpx),
            padding: EdgeInsets.symmetric(horizontal: 16.rpx),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8.rpx),
              color: const Color(0xffF7F7F7),
            ),
            alignment: Alignment.center,
            child: textInput(hintText: '选择人数（够几人吃的量）', fontSize: 16.rpx),
          ),
          Text(
            '难度',
            style: TextStyle(
              fontSize: 16.rpx,
              color: const Color(0xff333333),
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(vertical: 24.rpx),
            child: Row(
              children: List.generate(
                selectText.length,
                (index) {
                  return _difficult(
                    selectText[index],
                    cur: _current == index,
                    onTap: () {
                      setState(() {
                        _current = index;
                      });
                    },
                  );
                },
              ),
            ),
          ),
          Center(
            child: InkWell(
              child: Container(
                width: 335.rpx,
                height: 48.rpx,
                alignment: Alignment.center,
                margin: EdgeInsets.only(bottom: 48.rpx),
                decoration: BoxDecoration(
                  color: const Color(0xffFCC302),
                  borderRadius: BorderRadius.circular(24.rpx),
                ),
                child: Text(
                  '下一步',
                  style: TextStyle(
                    fontSize: 16.rpx,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _difficult(text, {bool? cur = false, onTap}) {
    return InkWell(
      onTap: onTap,
      child: Container(
        constraints: BoxConstraints(
          minWidth: 64.rpx,
        ),
        height: 48.rpx,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(4.rpx),
          color: cur! ? const Color(0xffFCC302) : const Color(0xffF7F7F7),
        ),
        margin: EdgeInsets.only(right: 23.rpx),
        padding: EdgeInsets.symmetric(horizontal: 13.rpx),
        child: Text(
          text,
          style: TextStyle(
            fontSize: 14.rpx,
            color: cur ? Colors.white : const Color(0xff999999),
          ),
        ),
      ),
    );
  }
}
